const Musicvisualizer = require("./Musicvisualizer.js");

// 业务代码
function linear(r1, r2, index, len){
  return Math.round(r1 + (r2-r1) * index / len);
}
function draw(arr) {
  const [r, g, b, a] = currentImgAviColor;
  const [[r1, g1, b1], [r2, g2, b2]] = getPure(r, g, b);
  const htmlArr = [];
  const htmlArr2 = [];
  const len = arr.length;
  let sum = 0;
  arr.forEach(function (item, index) {
    sum += item;
    const rotateZDeg = 180;
    const style = `left: -4px; transform: rotateZ(${rotateZDeg / size * (index + .5)}deg) translateY(-250px); height: ${item/2}px; background: linear-gradient(to bottom, rgba(${linear(r1, r2, index, len)}, ${linear(g1, g2, index, len)}, ${linear(b1, b2, index, len)}, 1), transparent);`;
    const style2 = `left: -4px; transform: rotateZ(${-rotateZDeg / size * (index + .5)}deg) translateY(-250px); height: ${item/2}px; background: linear-gradient(to bottom, rgba(${linear(r1, r2, index, len)}, ${linear(g1, g2, index, len)}, ${linear(b1, b2, index, len)}, 1), transparent);`;
    const style3 = `left: -4px; transform: rotateZ(${rotateZDeg / size * (index + .5)}deg) translateY(${-250 + item*2 }px); height: 8px; opacity: ${item / 300};background: rgba(${linear(r1, r2, index, len)}, ${linear(g1, g2, index, len)}, ${linear(b1, b2, index, len)}, 1);`;
    const style4 = `left: -4px; transform: rotateZ(${-rotateZDeg / size * (index + .5)}deg) translateY(${-250 + item*2}px); height: 8px; opacity: ${item / 300};background: rgba(${linear(r1, r2, index, len)}, ${linear(g1, g2, index, len)}, ${linear(b1, b2, index, len)}, 1);`;
    htmlArr.push(`<li style="${style}"></li><li style="${style2}"></li>`);
    htmlArr2.push(`<li style="${style3}"></li><li style="${style4}"></li>`);
  });
  const divs = document.querySelectorAll(".d3-wrap .round");
  const baseAvr = sum / arr.length / 300;
  const avr =  baseAvr + .8;
  const {x, y, w, h} = mousemoveConf;
  mv.setVolumn();
  const ry = (x-w/2)/w*60;
  const rx = - (y-h/2)/w*60;
  divs[0].style = `transform: scale(${avr}, ${avr}) rotateY(${ry}deg) rotateX(${rx}deg);`;
  divs[0].innerHTML = htmlArr.join("");
  divs[1].style = `transform: scale(${avr}, ${avr}) rotateY(${ry}deg) rotateX(${rx}deg);`;
  divs[1].innerHTML = htmlArr2.join("");

  document.querySelector(".dark-wrap").style = `background: radial-gradient(transparent 0%, transparent 15%, rgba(${r1}, ${g1}, ${b1}, .5) ${baseAvr * 80 + 30}%, rgba(${r2}, ${g2}, ${b2}, .8) 100%);`;
  document.querySelector(".img").style = `transform: translate(-50%, -50%) rotateY(${ry}deg) rotateX(${rx}deg) scale(${avr}, ${avr});`;
  document.querySelector(".img div").style = `border: 8px solid rgba(${r2},${g2},${b2}, .8);`;
  getPure(r, g, b, a);
  // require("../pictrue/video.js").load();
}
function compose(i) {
  i = i / 255;
  return Math.round((i + (i - .5) * (1 - i)) * 255);
}
function dCompose(i, time = 0) {
  i = i / 255;
  let rate = (1 - i);
  while (time + 3) {
    rate *= (1 - i);
    time --;
  }
  return Math.round((1- rate) * 255);
}
function getPure(r, g, b, time = 2){
  const min = Math.min(r, g, b);
  const per = min / 255;
  return [
    [
      dCompose(r, time),
      dCompose(r, time),
      dCompose(r, time)
    ], [
      dCompose(reduce(r, per), time + 2),
      dCompose(reduce(g, per), time + 2),
      dCompose(reduce(b, per), time + 2)
    ]
  ];
}
function reduce(r, per){
  return Math.round((r - 255 * per) / (1  -  per));
}
document.querySelector("#loadfile").onchange = function () {
  var file = this.files[0];
  var fr = new FileReader();
  fr.onload = function (e) {
    mv.play(e.target.result);
    // console.log(e.target.result);
  };
  file && fr.readAsArrayBuffer(file);
  // fr.readAsDataURL(file);
};
window.mousemoveConf = {x: 0, y: 0, w:1, h: 1};
document.addEventListener("mousemove", function (ev) {
  const [x, y, w, h] = [ev.clientX, ev.clientY, ev.target.offsetWidth, ev.target.offsetHeight]
  const conf = {x, y, w, h};
  window.mousemoveConf = conf;
})

//定义的音频数组长度
const size = 128;
window.mv = new Musicvisualizer({size: size, draw, musicConf: window.musicConf});
//初始化音频大小
mv.changeVolumn(.5);
